<template>
    <div class="box1">
        <div class="lc">
            <p class="lc-title">男女比例</p>
            <p class="lc-bg"></p>
        </div>
        <div class="people">
            <div class="man">
                <img src="../../images/man.png" alt="">
            </div>
            <div class="woman">
                <img src="../../images/woman.png" alt="">
            </div>
        </div>
        <div class="rate">
            <p>男士45%</p>
            <p>女士55%</p>
        </div>
        <div class="lc-charts" ref="charts"></div>
    </div>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue'
//引入echarts图表集成包
import * as echarts from 'echarts'

//获取组件实例
let charts = ref()

onMounted(() => {
    let mycharts = echarts.init(charts.value)
    mycharts.setOption({
        xAxis: {
            show: false,
            min: 0,
            max: 100
        },
        yAxis: {
            show: false,
            type: 'category'
        },
        series: [{
            type: 'bar',
            data: [45],
            barWidth: 20,
            z: 3,
            itemStyle: {
                color: 'rgb(0, 123, 255)',
                borderRadius: 20
            }
        },
        {
            type: 'bar',
            data: [100],
            barWidth: 20,
            barGap: '-100%',
            itemStyle: {
                color: 'rgb(255, 76, 122)',
                borderRadius: 20
            }
        }]
    })
})
</script>

<style scoped lang="scss">
.box1 {
    height: 100%;
    background: url(../../images/dataScreen-main-lc.png) no-repeat;
    background-size: 100% auto;
    margin-top: 15px;

    .lc {
        height: 37px;

        .lc-title {
            color: white;
            font-size: 20px;
            margin-left: 20px;
        }

        .lc-bg {
            width: 68px;
            height: 7px;
            background: url(../../images/dataScreen-title.png) no-repeat;
            background-size: cover;
            margin: 10px 0 0 20px;
        }
    }

    .people {
        height: 125px;
        margin: 30px 10px 10px 10px;
        display: flex;
        justify-content: center;

        .man {
            display: flex;
            margin: 0 55px 10px 0;
            width: 111px;
            height: 115px;
            background: url(../../images/man-bg.png) no-repeat;
            background-size: 100% 100%;
            justify-content: center;
            align-items: center;
        }

        .woman {
            display: flex;
            margin: 0 0 10px 55px;
            width: 111px;
            height: 115px;
            background: url(../../images/woman-bg.png) no-repeat;
            background-size: 100% 100%;
            justify-content: center;
            align-items: center;
        }
    }

    .rate {
        height: 20px;
        display: flex;
        justify-content: space-between;
        margin: 0 45px 0 45px;

        p {
            line-height: 20px;
            color: white;
        }
    }

    .lc-charts {
        height: 63px;
    }
}
</style>